<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">输入你所要输入的标题即可</title>
    <link rel="icon" href="https://s1.ax1x.com/2020/03/30/Gusb1f.th.png" type="image/x-icon">
    <link rel="stylesheet"  href="../static/css/typo.css" >
    <link rel="stylesheet"  href="../static/css/animate.css">
    <link rel="stylesheet"  href="../static/plugin/tocbot/tocbot.css">
    <link rel="stylesheet"  href="../static/plugin/prism/prism.css"   >
    <link rel="stylesheet"  href="../static/css/me.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <!-- 看板娘 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">


</head>


<!--导航-->
<nav th:fragment="menu(n)" class="ui inverted attached segment me-padded-tb-mini">
    <div class="ui container">
        <div class="ui inverted secondary menu stackable">
            <h2 class="ui teal header item">YRQ'S BLOG</h2>
            <a href="#" th:href="@{/}" class=" me-item item me-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="home icon"></i>首页</a>
            <a href="#" th:href="@{/types/-1}" class=" me-item item me-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="idea icon"></i>分类</a>
            <a href="#" th:href="@{/tags/-1}" class=" me-item item me-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="tags icon"></i>标签</a>
            <a href="#" th:href="@{/archives}"class=" me-item item me-mobile-hide" th:classappend="${n==4} ? 'active'"><i class="clone icon"></i>归档</a>
            <a href="#" th:href="@{/about}"class=" me-item item me-mobile-hide" th:classappend="${n==5} ? 'active'"><i class="info icon"></i>关于我</a>
            <a href="#" th:href="@{/comment}"class=" me-item item me-mobile-hide" th:classappend="${n==6} ? 'active'"><i class="comments icon"></i>留言板</a>
            <div  class="right me-item  item me-mobile-hide">
                <form name="search" action="#" th:action="@{/search}" method="post">
                    <div class="ui inverted transparent icon input">
                        <input type="text" name="title" placeholder="Search..." >
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>
            <div th:if="${session.user}!=null">
                <div class="right menu me-item item me-mobile-hide">
                    <div class="ui user dropdown item">
                        <div class="text">
                            <img src="../../static/image/1.png" alt="" class="ui avatar image">
                            <l th:text="${session.user.nickname}"></l>
                        </div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <a href="#" th:href="@{/logout}" class="item">注销</a>
                        </div>
                    </div>
                </div>
            </div>
            <div th:if="${session.user}==null"  class="right me-item  item me-mobile-hide">
                <a type="ui button" th:href="@{/login}" class=" me-item item me-mobile-hide" >登录</a>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black button icon me-top-right me-mobile-show">
        <i class="sidebar icon"></i>
    </a>

</nav>


<!--底部footer-->
<footer th:fragment="footer" class="ui inverted vertical segment me-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/image/wechat.png" alt=""
                             class="ui rounded image" style="width: 110px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">站长推荐</h4>
                <div class="ui inverted link list">
                    <a  href="https://blog.csdn.net/qq_41910103" class="item"> 我的CSDN </a>
                    <a  href="https://www.bilibili.com/video/BV1mE411F7Md?t=367" class="item">优秀前端网站汇总</a>
                    <a  href="https://wallpaperscraft.com/catalog/art" class="item">优质好图</a>
                    <a  href="https://cloudconvert.com" class="item">pdf -> word</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">联系方式</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email:yrq991121@163.com</a>
                    <a href="#" class="item">QQ:1193700079</a>
                    <a href="https://github.com/1193700079/blog_yrq" target="_blank" class="item">Github</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">网站简介</h4>
                <p> 第一次尝试全栈建站</p>
                <p>  作为个人技术博客，主要练习一下Springboot以及其他框架的结合，
                  如果网站有bug，可以私信和我说，我会及时修复 </p>
                   目前网站有登录功能，登录的话头像目前还不能更改，之后更新补上
                  登录的用户可以进行网站留言之类的，到时候添加一些小游戏在站内
                <p>   欢迎大家有空来玩呀，一起学习一起进步！！奥利给！！</p>
                <p> 有需要网页后台设计的也可以联系我，前端的话目前是在积极学习</p>
            </div>
        </div>
        <div class="ui inverted section divider">
        </div>
        <p class="m-text-lined m-text-spaced m-text-thin m-opacity-mini">Copyright @ 2020 - 2021 YRQ_BLOG Designed by yrq
            <br>
            来自华北理工大学的技术宅
        </p>
    </div>


</footer>


<th:block th:fragment="script">
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <!--看板娘 -->
    <script src="https://cdn.jsdelivr.net/gh/1193700079/live2d-widget@latest/autoload.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <script src="../static/plugin/tocbot/tocbot.js"></script>
    <script src="../static/plugin/qrcode/qrcode.js"></script>
    <script src="../static/plugin/prism/prism.js"></script>
    <script src="../static/plugin/waypoints/jquery.waypoints.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/1193700079/live2d-widget@latest/autoload.js"></script>
    <script>
        $('.ui.user.dropdown').dropdown({
            on: 'hover'
        });
        $(".menu.toggle").click(function () {
            $(".me-item").toggleClass("me-mobile-hide");
        });
    </script>
    <script>
        $(".PopInfo").popup({
            popup : $(".InfoMe.popup"),
            position: "left center"
        });
        $(".qq").popup({
            position: "bottom center"
        });
        $(".wechat").popup({
            popup : $(".wechat_qr.popup"),
            position: "bottom center"
        });
        // 手机端点击显示导航栏
        $('.menu.toggle').on('click',function(){
            $(".me-item").toggleClass("me-mobile-hide");
        });
    </script>
    <!-- 鼠标移动效果 -->
    <script>
        ! function () {

            function n(n, e, t) {

                return n.getAttribute(e) || t

            }

            function e(n) {

                return document.getElementsByTagName(n)

            }

            function t() {

                var t = e("script"),
                    o = t.length,
                    i = t[o - 1];

                return {

                    l: o,
                    z: n(i, "zIndex", -1),
                    o: n(i, "opacity", .5),
                    c: n(i, "color", "0,0,0"),
                    n: n(i, "count", 99)

                }

            }

            function o() {

                a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,

                    c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body
                        .clientHeight

            }

            function i() {

                r.clearRect(0, 0, a, c);

                var n, e, t, o, m, l;

                s.forEach(function (i, x) {

                    for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y <
                    0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[
                        e],

                    null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y,

                        l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i
                        .y -= .03 * m),

                        t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle =
                        "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r
                        .stroke()))

                }),

                    x(i)

            }

            var a, c, u, m = document.createElement("canvas"),

                d = t(),
                l = "c_n" + d.l,
                r = m.getContext("2d"),
                x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window
                        .mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

                    function (n) {

                        window.setTimeout(n, 1e3 / 45)

                    },

                w = Math.random,
                y = {
                    x: null,
                    y: null,
                    max: 2e4
                };
            m.id = l, m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o, e("body")[0]
                .appendChild(m), o(), window.onresize = o,

                window.onmousemove = function (n) {

                    n = n || window.event, y.x = n.clientX, y.y = n.clientY

                },

                window.onmouseout = function () {

                    y.x = null, y.y = null

                };

            for (var s = [], f = 0; d.n > f; f++) {

                var h = w() * a,
                    g = w() * c,
                    v = 2 * w() - 1,
                    p = 2 * w() - 1;
                s.push({
                    x: h,
                    y: g,
                    xa: v,
                    ya: p,
                    max: 6e3
                })

            }

            u = s.concat([y]),

                setTimeout(function () {
                    i()
                }, 100)

        }();
    </script>
</th:block>

</body>
</html>